<template>
  <div>
    <div v-if="dataJson.stylesType == 0" class="container radiusBottom">
      <div class="images">
        <div class="img">
          <img :src="styleUrls[dataJson.type][dataJson.stylesType]" />
        </div>
        <div class="buttonSetStyle" @click="alertTag">修改样式</div>
      </div>
    </div>
    <div v-if="dataJson.stylesType == 1" class="container radiusBottom">
      <div class="shop">
        <div class="list_1 clearfix">
          <div class="item">
            <img :src="Images.defaultImg" class="shopImg" />
            <div class="text">
              <p>商品名称</p>
              <span class="money_present">
                <span class="f_s_15">￥</span>400.00</span
              >
              <!-- <span class="money_Original">￥600.00</span> -->
              <img :src="Images.shoplogo" class="iconShop" />
            </div>
          </div>
        </div>
        <div class="buttonSetStyle" @click="alertTag">修改样式</div>
      </div>
    </div>
    <div class="container">
      <!-- <div class="headerNav">
        <ul>
          <li @click="shopActive = 0">
            自动选择商品
          </li>
                 :class="{ shop_check: shopActive == 0, shop_style_0: true }" <li :class="{shop_check:shopActive==1,shop_style_0:true}" @click="shopActive=1">手动选择商品</li>
        </ul>
      </div> -->

      <div v-show="shopActive == 0" class="listHeads">
        <el-button @click="wareTag">
          选择商品
        </el-button>
        <span>上下拖拽可排序</span>
      </div>
      <ul>
        <li
          v-for="(shopitem, shopindex) in dataJson.shopId"
          v-show="shopActive == 0 || 1"
          :key="shopindex"
          class="listItem"
          draggable="true"
          @dragstart.capture="dragstartListSort(shopindex, $event)"
          @drop.stop="dropListSort(shopindex, $event, 'shopId')"
          @dragover.prevent="dragoverListSort(shopitem, shopindex, $event)"
        >
          <img :src="shopitem.src" />
          <span class="name">
            {{ shopitem.goods_name }}
          </span>
          <span class="del" @click="deleteShopIdItem(shopindex)">
            删除
          </span>
        </li>
      </ul>
    </div>

    <!-- <div class="container">
      <span class="setOther">其他设置</span>
  <el-checkbox v-model="dataJson.setOtherCheckedFlag">售完显示提示</el-checkbox> 
    </div> -->
    <ware-alert :ware="ware" @close="close" />
  </div>
</template>

<script>
import { Images, styleUrls } from "../../data";
export default {
  components: {
    wareAlert: () => import("./toolCom/warealert")
  },
  props: {
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      Images,
      styleUrls,
      shopActive: 0,
      getValue: {
        value1: "",
        value2: "",
        value3: ""
      },
      ware: false,
      usenameId: ""
    };
  },
  methods: {
    alertTag() {
      this.$emit("alertTag", true, this.dataJson.stylesType, 11);
    },
    dragstartListSort(index, e) {
      this.$emit("dragstartListSort", index, e);
    },
    dropListSort(index, e, attr) {
      this.$emit("dropListSort", index, e, attr);
    },
    dragoverListSort() {},
    deleteShopIdItem(index) {
      this.dataJson.shopId.splice(index, 1);
    },
    wareTag() {
      this.ware = true;
    },
    close(e) {
      this.ware = false;
      if (e) {
        this.dataJson.shopId = [...this.dataJson.shopId, ...e];
        this.dataJson.shopId = this.dataJson.shopId.map(ele => {
          ele = JSON.stringify(ele);
          return ele;
        });
        this.dataJson.shopId = Array.from(new Set(this.dataJson.shopId));
        this.dataJson.shopId = this.dataJson.shopId.map(ele => {
          ele = JSON.parse(ele);
          return ele;
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/decorate.scss";
.shop {
  .list_1 {
    padding: 20px;
    height: 126px;
    .item {
      .shopImg {
        float: left;
        width: 90px;
        height: 90px;
      }

      .text {
        float: left;
        height: 90px;
        padding: 0 0 0 20px;
        width: 340px;
        p {
          height: 64px;
        }
      }
    }
  }

  .iconShop {
    width: auto;
    height: auto;
    padding: 0;

    float: right;
    margin-right: 10px;
    margin-top: 2px;
  }

  span {
    .money_present {
      font-size: 20px;
      color: #fc4045;
    }
    .money_Original {
      font-size: 13px;
      color: #999999;
      text-decoration: line-through;
    }
  }
  .text {
    padding: 10px;
  }
  p {
    color: #999999;
    font-size: 16px;
  }
}
</style>
